<!DOCTYPE html>
<html>
	<head>
		<!-- 
			This carousel example is created with jQuery and the carouFredSel-plugin.
			http://jquery.com
			http://caroufredsel.frebsite.nl
		-->

		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<meta name="description" value="An automatically running slideshow using a crossfade effect with inline scrolling thumbnails that appear onMouseOver." />
		<meta name="keywords" value="example, slideshow, carousel, thumbnails, scrolling, fading" />
		<title>Automatic slideshow with inline scrolling thumbnails</title>

		<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
		<script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				$('#wrapper').hover(
					function() {
						$('#carousel').trigger( 'pause' );
						$('#thumbnails').parent().animate({
							top: 280
						});
					}, function() {
						
						$('#carousel').trigger( 'play' );
						$('#thumbnails').parent().animate({
							top: 375
						});
					}
				);

				$('#carousel').carouFredSel({
					scroll: {
						fx: 'crossfade',
						onBefore: function( data ) {
							$('#thumbnails').trigger( 'slideTo', [ $('#thumbnails img[alt='+ data.items.visible.attr( 'alt' ) +']'), -2 ] );
						}
					}
				});

				$('#thumbnails').carouFredSel({
					auto: false,
					items: {
						start: -2
					}
				});

				$('#thumbnails img').click(function() {
					$('#carousel').trigger( 'slideTo', [ $('#carousel img[alt='+ $(this).attr( 'alt' ) +']') ] );

				}).css( 'cursor', 'pointer' );
			});
		</script>
		<style type="text/css">
			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				min-height: 600px;
			}
			body * {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 14px;
				color: #333;
				line-height: 22px;
			}

			#wrapper {
				width: 600px;
				height: 400px;
				margin: -200px 0 0 -300px;
				overflow: hidden;
				position: absolute;
				left: 50%;
				top: 50%;
				
				box-shadow: 0 20px 50px #333;
			}
			#carousel {
				width: 600px;
				height: 400px;
				overflow: hidden;
				position: absolute;
				top: 0;
				left: 0;
			}
			#carousel img {
				display: block;
				float: left;
			}
			#thumbnails {
				width: 600px;
				height: 120px;
				overflow: hidden;
				position: absolute;
				top: 375px;
				left: 0;
				z-index: 2;
			}
			#thumbnails img {
				display: block;
				float: left;
				margin: 10px;
				width: 100px;
				height: 100px;
				
				box-shadow: 0 0 10px #000;
			}
			#thumbnails img:hover {
				width: 110px;
				height: 110px;
				margin: 5px;
			}
			
			#donate-spacer {
				height: 100%;
			}
			#donate {
				border-top: 1px solid #999;
				width: 750px;
				padding: 50px 75px;
				margin: 0 auto;
				overflow: hidden;
			}
			#donate p, #donate form {
				margin: 0;
				float: left;
			}
			#donate p {
				width: 650px;
			}
			#donate form {
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="carousel">
				<img src="img/large/carnaval1.jpg" alt="c1" width="600" height="400" />
				<img src="img/large/carnaval2.jpg" alt="c2" width="600" height="400" />
				<img src="img/large/carnaval3.jpg" alt="c3" width="600" height="400" />
				<img src="img/large/carnaval4.jpg" alt="c4" width="600" height="400" />
				<img src="img/large/carnaval5.jpg" alt="c5" width="600" height="400" />
				<img src="img/large/carnaval6.jpg" alt="c6" width="600" height="400" />
				<img src="img/large/carnaval7.jpg" alt="c7" width="600" height="400" />
				<img src="img/large/carnaval8.jpg" alt="c8" width="600" height="400" />
				<img src="img/large/carnaval9.jpg" alt="c9" width="600" height="400" />
				<img src="img/large/carnaval10.jpg" alt="c10" width="600" height="400" />
			</div>
			<div id="thumbnails">
				<img src="img/small/carnaval1.jpg" alt="c1" width="100" height="100" />
				<img src="img/small/carnaval2.jpg" alt="c2" width="100" height="100" />
				<img src="img/small/carnaval3.jpg" alt="c3" width="100" height="100" />
				<img src="img/small/carnaval4.jpg" alt="c4" width="100" height="100" />
				<img src="img/small/carnaval5.jpg" alt="c5" width="100" height="100" />
				<img src="img/small/carnaval6.jpg" alt="c6" width="100" height="100" />
				<img src="img/small/carnaval7.jpg" alt="c7" width="100" height="100" />
				<img src="img/small/carnaval8.jpg" alt="c8" width="100" height="100" />
				<img src="img/small/carnaval9.jpg" alt="c9" width="100" height="100" />
				<img src="img/small/carnaval10.jpg" alt="c10" width="100" height="100" />
			</div>
		</div>
		
		<div id="donate-spacer"></div>
		<div id="donate">
			<p>This carousel-example is created for your inspiration, you may use it for free in all of your projects.<br />
				If you like it, please help me &quot;keep up the good work&quot; and donate.</p>
			<form id="c-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post">
				<input type="hidden" name="cmd" value="_s-xclick" />
				<input type="hidden" name="hosted_button_id" value="ENVLWPR4QMU3U" />
				<input type="image" src="https://www.paypalobjects.com/en_US/NL/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" />
				<img alt="" border="0" src="https://www.paypalobjects.com/nl_NL/i/scr/pixel.gif" width="1" height="1" />
			</form>
		</div>
	</body>
</html>